<template>
  <div class="container">
    <el-card class="info-wrapper">
      <div style="width: 100%;text-align: center">
        <span style="font-weight: bold;font-size: 18px">合同信息</span>
      </div>
      <div style="padding-top: 30px">
        <el-form ref="formData" :model="formData" label-position="left" label-width="100px">
          <div style="width: 49%; float: left;height: auto">
            <el-form-item label="合同名称">
              <el-input v-model="formData.name" placeholder="合同名称" clearable />
            </el-form-item>
            <el-form-item label="合同金额">
              <el-input v-model="formData.price" placeholder="合同金额" clearable />
            </el-form-item>
            <el-form-item label="项目状态">
              <el-select v-model="formData.status" clearable placeholder="请选择项目状态" style="width: 100%">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="对接人">
              <el-input v-model="formData.linker_name" placeholder="对接人" clearable />
            </el-form-item>
            <el-form-item label="文件上传">
              <el-button type="warning" size="mini" round @click="showUpload(1)">合同上传</el-button>
              <el-button type="danger" size="mini" round @click="showUpload(2)">需求上传</el-button>
            </el-form-item>
          </div>
          <div style="width: 49%; float: right;height: auto">
            <el-form-item label="所属项目">
              <el-select v-model="formData.project_id" filterable clearable placeholder="请选择所属项目" style="width: 100%">
                <el-option
                  v-for="(item,key) in projectList"
                  :key="key"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="合同周期">
              <div class="block">
                <el-date-picker
                  v-model="formData.develop_date"
                  type="daterange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  style="width: 90%"
                />
              </div>
            </el-form-item>
            <el-form-item label="付费方式">
              <el-select v-model="formData.pay_type" clearable placeholder="请选择付费方式" style="width: 100%" @change="getDevelopPeriod()">
                <el-option
                  v-for="(item,key) in payList"
                  :key="key"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="对接人电话">
              <el-input v-model="formData.linker_phone" placeholder="对接人电话" clearable />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="formData.remark" placeholder="备注" type="textarea" clearable />
            </el-form-item>
          </div>
          <div v-show="formData.money_list.length>0" style="display: inline-block;width: 100%">
            <el-divider>付费流程</el-divider>
            <el-form-item v-for="(item,key) in formData.money_list" :key="key" :label="item.label">
              <el-input v-model="item.price" placeholder="应付金额" clearable style="width: 300px" readonly />
              <el-input v-model="item.payment" placeholder="已付金额" clearable style="width: 300px" />
            </el-form-item>
          </div>
          <div style="text-align: center;display: inline-block;width: 100%">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-dialog
      :title="fileType==1?'合同文件上传':'需求文档上传'"
      :visible.sync="dialogFormVisible"
      center
    >
      <div style="text-align: center">
        <el-upload
          class="upload-demo"
          action=""
          :auto-upload="false"
          :multiple="false"
          :show-file-list="false"
          :on-change="handleChange"
          drag
        >
          <div v-if="currentFileObj" class="el-upload__text" style="position: relative;top: 48%;"><span>{{ currentFileObj.name }}</span></div>
          <div v-else>
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </div>
        </el-upload>
        <el-button
          type="warning"
          size="medium"
          style="margin-top: 30px"
          @click="fileUpload()"
        >上 传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
  name: 'ArchivesBusinessContractInfo',
  data() {
    return {
      formData: {
        id: '',
        name: '',
        develop_date: '',
        price: '',
        linker_name: '',
        linker_phone: '',
        pay_type: '',
        project_id: '',
        contract_path: '',
        document_path: '',
        remark: '',
        money_list: []
      },
      initData: {},
      currentFileObj: null,
      fileType: 0,
      dialogFormVisible: false,
      projectList: [],
      showLoading: false,
      loadingObj: {},
      statusList: [
        { label: '未处理', value: 0 },
        { label: '进行中', value: 1 },
        { label: '已完成', value: 2 }
      ],
      payList: [
        { label: '3：3：4', value: 1 },
        { label: '5：5', value: 2 },
        { label: '2：3：2：3', value: 3 },
        { label: '3：2：3：2', value: 4 }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id || 0
    }
  },
  watch: {
    showLoading: function(val, oldVla) {
      if (val) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.loadingObj = loading
      } else {
        this.loadingObj.close()
      }
    }
  },
  mounted() {
    this.showLoading = true
    if (this.id) {
      this.getInfo(this.id)
    }
    this.getProject()
    this.showLoading = false
  },
  activated() {

  },
  methods: {
    onSubmit() {
      this.showLoading = true
      let url, method
      if (this.formData.id) {
        url = '/admin/contract/' + this.formData.id
        method = 'put'
      } else {
        url = '/admin/contract'
        method = 'post'
      }
      const params = this.formData
      this.$request({
        url: url,
        method: method,
        params: params
      }).then((response) => {
        this.$message({
          message: response.message,
          type: 'success'
        })
        const id = response.data.id
        this.$router.push({
          path: 'contract-info',
          query: { id }
        })
        this.showLoading = false
      }).catch(() => {
        this.showLoading = false
      })
    },
    getInfo(id) {
      this.$request({
        url: '/admin/contract/' + id,
        method: 'get'
      }).then((response) => {
        this.initData = JSON.parse(JSON.stringify(response.data))
        this.formData = response.data
      })
    },
    fileUpload() {
      if (!this.currentFileObj) {
        this.$message({
          message: '请选择上传的文件',
          type: 'warning'
        })
        return
      }
      const file = this.currentFileObj.raw
      var formdata = new FormData()
      formdata.append('file', file)
      this.showLoading = true
      const uploadUrl = this.$uploadUrl + '/admin/projectUpload'

      axios
        .post(uploadUrl, formdata, {
          headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization': getToken()
          }
        })
        .then(response => {
          const result = response.data
          if (result.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            switch (this.fileType) {
              case 1:
                this.formData.contract_path = result.data.filePath
                break
              case 2:
                this.formData.document_path = result.data.filePath
                break
            }
            this.dialogFormVisible = false
            this.showLoading = false
          } else {
            this.$message({
              message: result.message,
              type: 'warning'
            })
            this.showLoading = false
          }
        }).catch((error) => {
          this.$message({
            message: error,
            type: 'warning'
          })
          this.showLoading = false
        })
    },
    handleChange(file) {
      const isLt10M = file.size / 1024 / 1024 > 10
      if (isLt10M) {
        this.$message.error('文件大小不能超过10M')
        return
      }
      this.currentFileObj = file
    },
    showUpload(type) {
      this.dialogFormVisible = true
      this.currentFileObj = null
      this.fileType = type
    },
    getDevelopPeriod() {
      const initData = this.initData
      const pay_type = this.formData.pay_type
      let money_list = []
      if (initData.pay_type && initData.pay_type === pay_type) {
        money_list = initData.money_list
      } else {
        switch (pay_type) {
          case 1:
            money_list = [
              { label: '一期款项', price: '', payment: '' },
              { label: '二期款项', price: '', payment: '' },
              { label: '三期款项', price: '', payment: '' }
            ]
            break
          case 2:
            money_list = [
              { label: '一期款项', price: '', payment: '' },
              { label: '二期款项', price: '', payment: '' }
            ]
            break
          case 3:
            money_list = [
              { label: '一期款项', price: '', payment: '' },
              { label: '二期款项', price: '', payment: '' },
              { label: '三期款项', price: '', payment: '' },
              { label: '四期款项', price: '', payment: '' }
            ]
            break
          case 4:
            money_list = [
              { label: '一期款项', price: '', payment: '' },
              { label: '二期款项', price: '', payment: '' },
              { label: '三期款项', price: '', payment: '' },
              { label: '四期款项', price: '', payment: '' }
            ]
            break
        }
      }
      this.formData.money_list = money_list
    },
    getProject() {
      const params = {
        limit: 100000
      }
      this.$request({
        url: '/admin/project',
        method: 'get',
        params: params
      }).then((response) => {
        const tempArr = []
        response.data.list.forEach((item) => {
          tempArr.push({
            label: item.name,
            value: item.id
          })
        })
        this.projectList = tempArr
      }).catch((error) => {
        this.$message({
          message: error,
          type: 'warning'
        })
      })
    }
  }
}
</script>
<style scoped>
  .info-wrapper{
    margin-top: 10px;
    margin-left: 10px;
    width: 100% !important;
    margin-bottom: 10px;
  }
</style>
